import './index.scss'
/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import '../../directive/index'
import { microCreateMinis } from '../../minis'
import { SlickList, SlickItem, HandleDirective } from 'vue-slicksort'
import draggable from 'vuedraggable'
import { newGetMicroPageCompotentDetail } from '@/api/shoppingMall/feature'

/** 图片广告*/
export default {
  name: 'micro-image-ad-box',
  mixins: [microCreateMinis],
  directives: { handle: HandleDirective },
  data() {
    return {
      isTagStyle:false,
      isGetChooseFeature: false, // 是否可以返回微页面
      dialogChoosePages: false, // 自定义页面弹窗
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun', // 我自己的验证规则函数  比如弹窗之类的
      hotScale: 392 / 500,
      dialogHot: false, // 是否显示热区
      dialogChooseGoods: false, // 选择商品
      isGetChooseData: false, // 开始返会商品
      cacheImage: false, // 是否是正在编辑热区的
      /** 选择图片的弹窗*/
      dialogChooseImgVisible: false, // 显示选择图片
      isGetChooseImages: false, // 返回图片
      canChooseImagesNum: 1, // 可以添加的图片数量
      isChangeImg: false, // 是否为更换图片模式
      currentEditIndex: 0, // 当前编辑的图片
      currentHotEditIndex: 0, // 当前编辑的热区
      settingActive: 0,
      tabList: [
        {
          icon: 'el-icon-bank-card',
          title: '纵向平铺'
        },
        {
          icon: 'el-icon-bank-card',
          title: '自动轮播'
        },
        {
          icon: 'el-icon-bank-card',
          title: '横向滚动'
        },
        {
          icon: 'el-icon-bank-card',
          title: '横向平铺'
        },
        {
          icon: 'el-icon-bank-card',
          title: '滑动播放'
        }
      ],
      showTime: [],
      formData: {
        indicator: 1, // 选择模板:
        cornerBorder: 0,
        imageMargin_a: 0,
        imageMargin_b: 0,
        pageMargin: 0,
        marginTop: 0,
        marginBottom: 0,
        intervalTime: 3000,
        indicatorStyle: 1,
        imageSize: 200,
        height: 150,
        showStartTime: '',
        showEndTime: '',
        imageList: [],
        leftRange:0,
        topRange:65,
        tagHorn:0
      },
      cacheImageActiveBox: [], // 缓存当前box list
      boxItem: { // 盒子模板
        link: '',
        type: '',
        title: '',
        left: 0,
        top: 0,
        translateX: 0,
        translateY: 0,
        width: 102,
        height: 102
      },
      linkList: [
        {
          type: 1,
          title: '商品详情页',
          link: ''
        },
        {
          type: 2,
          title: '购物车',
          link: ''
        },
        {
          type: 3,
          title: '个人中心',
          link: ''
        },
        {
          type: 4,
          title: '活动页',
          link: ''
        }
      ],
      commandInfo: {}, // 选择跳转的信息
      indicator_d_active: 1
    }
  },
  watch: {
    showTime: {
      deep: true,
      handler(val) {
        this.formData.showStartTime = val[0]
        this.formData.showEndTime = val[1]
        console.log('val__',val)
      }
    }
  },
  components: {
    draggable,
    SlickList,
    SlickItem,
    chooseGoods: () => import('@/components/choose-goods/index.vue'),
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    chooseFeature: () => import('@/components/choose-feature/index.vue')
  },
  filters: {
    typeNameFilter(val) {
      let str = ''
      switch (val) {
        case 1:
          str = '商品详情页'
          break
        case 2:
          str = '购物车'
          break
        case 3:
          str = '个人中心'
          break
        case 4:
          str = '自定义页面'
          break
      }
      return str
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    // tabs 切换事件
    handleClick(el){
      if(el.index === '1'){
        var tag = this.formData.imageList.find(item =>{
          return item.isTag
        })
        if(tag === undefined){
          this.isTagStyle = false
        }else{
          this.isTagStyle = true
        }
      }
    },
    choosePage(index) {
      console.log('index==', index)
      this.currentEditIndex = index
      this.dialogChoosePages = true
    },
    chooseChooseFeaturesFun($event) {
      const microTitle = $event.data.type === 0 && '系统页面' || $event.data.type === 1 && '功能页面' || $event.data.type === 2 && '商品详情'
      || $event.data.type === 3 && '商品活动'
      if ($event.data.type === 0) {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.path,
          microTitle: microTitle
        })
        console.log('$event.data', $event.data.type)
      } else if ($event.data.type === 3){
        if($event.data.channel[0] === 31){
          this.setLinkInfo({
            activityId: $event.data.id,
            channel: $event.data.channel[0],
            goodsId: '',
            type: $event.data.type,
            title: $event.data.title,
            link: $event.data.path,
            microTitle: microTitle
          })
        }else if($event.data.channel[0] === 32) {
          this.setLinkInfo({
            activityId: $event.data.id,
            channel: $event.data.channel[0],
            goodsId: '',
            type: $event.data.type,
            title: $event.data.title,
            link: $event.data.path,
            microTitle: microTitle
          })
        }else
        {
          this.setLinkInfo({
            activityId: $event.data.id,
            channel: $event.data.channel[0],
            goodsId: $event.data.campaignVO.goodsId,
            type: $event.data.type,
            title: $event.data.title,
            link: $event.data.path,
            microTitle: microTitle
          })
        }

      } else {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.id,
          microTitle: microTitle
        })
      }
      // if ($event.data.title) {
      //   this.setLinkInfo({
      //     title: $event.data.title,
      //     link: $event.data.id
      //   })
      // }
      // this.formData.imageList[this.currentEditIndex].id = $event.data.id
      // this.formData.imageList[this.currentEditIndex].microTitle = $event.data.title
      this.dialogChoosePages = false
    },
    getPicsUrl(arr) {
      console.log('arr', arr)
      // this.formData.imageList = arr
    },
    sweiperChange_a(val) {
      this.indicator_d_active = val + 1
    },
    /** 切换模板*/
    changeIndicator(index) {
      /*  if (this.formData.imageList.length && index + 1 !== this.formData.indicator) {
          this.formData.imageList.map(res => {
            res.activeBoxs = []
            if (this.formData.indicator === 4) { // 切换为热区模式，清空link title type
              res.link = ''
              res.title = ''
              res.type = ''
            }
          })
        }*/
      this.formData.indicator = index + 1
    },
    /** 显示添加热区*/
    showHotAreaPop(index) {
      this.dialogHot = true
      this.currentEditIndex = index
      this.cacheImageActiveBox = JSON.parse(JSON.stringify(this.formData.imageList[this.currentEditIndex].activeBoxs))
    },
    /** 点击添加热区*/
    addHotArea() {
      this.cacheImageActiveBox.push(JSON.parse(JSON.stringify(this.boxItem)))
    },
    /** 保存热区*/
    saveHotBox() {
      this.formData.imageList[this.currentEditIndex].activeBoxs = this.cacheImageActiveBox
      this.dialogHot = false
    },
    /** 更换图片*/
    changeImg(index) {
      this.isChangeImg = true
      this.currentEditIndex = index
      this.$refs.pics.dialog = true
      this.canChooseImagesNum = 1
    },
    /** choose图片的回调*/
    chooseImagesEnd($item) {
      this.dialogChooseImgVisible = false
      // console.log('$item-fu', $item)
      const $imgData = $item.data
      if ($imgData.length) {
        if (this.isChangeImg) { // 更换图片模式
          this.formData.imageList[this.currentEditIndex].url = $imgData[0]
          // this.formData.imageList[this.currentEditIndex].title = $imgData[0].productName
          return
        }
        $imgData.map(res => {
          this.formData.imageList.push({
            url: res,
            title: '',
            link: '',
            type: '',
            isTag:false,
            style:1,
            activeBoxs: []
          })
        })
      }
    },
    // 选择商品回调
    chooseGoodsFun($event) {
      // console.log('$event', $event)
      if ($event.data.length) {
        this.setLinkInfo({
          title: $event.data[0].name,
          link: $event.data[0].id
        })
      }
      this.dialogChooseGoods = false
    },
    /** 设置跳转信息*/
    setLinkInfo(obj) {
      // console.log('obj', obj)
      if (this.isCacheImage) { // 热区弹窗编辑模式
        this.cacheImageActiveBox[this.currentHotEditIndex].title = obj.title
        this.cacheImageActiveBox[this.currentHotEditIndex].link = obj.link
        this.cacheImageActiveBox[this.currentHotEditIndex].type = this.commandInfo.type
        this.$forceUpdate()
        return
      }
      // if (this.formData.indicator === 4) { // 热区非弹窗编辑模式
      //   this.formData.imageList[this.currentEditIndex].activeBoxs[this.currentHotEditIndex].title = obj.title
      //   this.formData.imageList[this.currentEditIndex].activeBoxs[this.currentHotEditIndex].link = obj.link
      //   this.formData.imageList[this.currentEditIndex].activeBoxs[this.currentHotEditIndex].type = this.commandInfo.type
      // } else {
      //   if(obj.type !== 3){
      //     this.formData.imageList[this.currentEditIndex].microTitle = obj.title
      //     this.formData.imageList[this.currentEditIndex].link = obj.link
      //     this.formData.imageList[this.currentEditIndex].type = obj.type
      //     this.formData.imageList[this.currentEditIndex].microType = obj.microTitle
      //   }else{
      //     this.formData.imageList[this.currentEditIndex].microTitle = obj.title
      //     this.formData.imageList[this.currentEditIndex].link = obj.link
      //     this.formData.imageList[this.currentEditIndex].type = obj.type
      //     this.formData.imageList[this.currentEditIndex].microType = obj.microTitle
      //     this.formData.imageList[this.currentEditIndex].activityId = obj.activityId
      //     this.formData.imageList[this.currentEditIndex].goodsId = obj.goodsId
      //     this.formData.imageList[this.currentEditIndex].channel = obj.channel
      //   }

      // }
        if(obj.type !== 3){
          this.formData.imageList[this.currentEditIndex].microTitle = obj.title
          this.formData.imageList[this.currentEditIndex].link = obj.link
          this.formData.imageList[this.currentEditIndex].type = obj.type
          this.formData.imageList[this.currentEditIndex].microType = obj.microTitle
        }else{
          this.formData.imageList[this.currentEditIndex].microTitle = obj.title
          this.formData.imageList[this.currentEditIndex].link = obj.link
          this.formData.imageList[this.currentEditIndex].type = obj.type
          this.formData.imageList[this.currentEditIndex].microType = obj.microTitle
          this.formData.imageList[this.currentEditIndex].activityId = obj.activityId
          this.formData.imageList[this.currentEditIndex].goodsId = obj.goodsId
          this.formData.imageList[this.currentEditIndex].channel = obj.channel
        }
      // console.log('this.formData.imageList', this.formData.imageList)
      this.$forceUpdate()
      this.getDetail()
    },
    getDetail(){
      newGetMicroPageCompotentDetail({
        type:'image_ad',
        dataField:this.formData
      }).then(res =>{
        this.formData.imageList = res.items
      })
    },
    /** 选择跳转路径*/
    command(eve) {
      this.isCacheImage = eve.isCacheImage || false
      this.commandInfo = eve.linkItem
      console.log('eve', eve)
      console.log('this.commandInfo', this.commandInfo)
      /* eslint-disable */
      if (eve.hasOwnProperty('currentHotEditIndex')) {
        this.currentHotEditIndex = eve.currentHotEditIndex
      }
      if (eve.hasOwnProperty('currentEditIndex')) {
        this.currentEditIndex = eve.currentEditIndex
      }
      /* eslint-enable */
      if (eve.linkItem.type === 1) {
        this.dialogChooseGoods = true
        return
      }
      if (eve.linkItem.type === 4) {
        this.dialogChoosePages = true
        return
      }
      console.log('this.currentEditIndex', this.currentEditIndex)
      this.setLinkInfo({
        title: this.commandInfo.title,
        link: this.commandInfo.link
      })
    },
    /* 校验*/
    checkData() {
      if (this.formData.imageList.length) {
        // this.formData.imageList.map(res => {
        //   if (Number(this.formData.indicator) === 4) { // 切换为热区模式，清空link title type
        //     res.link = ''
        //     res.title = ''
        //     res.type = ''
        //   } else { // 非热区模式
        //     res.activeBoxs = []
        //   }
        // })
        // this.formData.imageList = [];
      }
      const isPass = (this.formData.imageList.length > 0)
      this.myCheckResult(isPass)
      console.log('isPass_____',isPass)
    },
    // 弹出哪个没有填写的
    mySelfCheckFun() {
    console.log('caaca')

      if (this.formData.imageList.length === 0) {
        this.$message.error('请添加图片！')
      }

    }
  }
}
